<template>
    <div>
        <span>
            <custom-slider min="10" max="50" step="2" raising v-model="slider" style="width: 120px"/>
            {{slider}}
        </span>
        <span>
            <custom-slider :values="sliderValues" raising v-model="sliderStr" style="width: 120px"></custom-slider>
        </span>
    </div>
</template>

<script>
import CustomSlider from "vue-custom-range-slider"
import "vue-custom-range-slider/dist/vue-custom-range-slider.css"
export default {
    name: 'customRangeSlider',
    components:{
        CustomSlider
    },
    data(){
        return{
            slider:12,
            sliderStr:"a",
            sliderValues:[
                {
                    label:"Not at all",
                    value:"a"
                },
                {
                    label:"A tiny bit",
                    value:"b"
                },
                {
                    label:"Its ok",
                    value:"c"
                },
                {
                    label:"Its very good",
                    value:"d"
                },
                {
                    label:"Its AMAZING!",
                    value:"e"
                }
            ]
        }
    }
}
</script>

<style scoped>
.wrapper {
    padding: 50px;
    font-family: "Courier New",Courier,monospace;
}
</style>
